<template>
    <ul class="list">
      <li class="item" v-for="(item,key) of cities"  :key="key" @click="handLetter">
        {{ key }}
      </li>

    </ul>

</template>

<script>
    export default {
        name: "alphabet",
      props:{
          cities:{
            type:Object
          }
      },
      methods:{

        handLetter (e) {
          // console.log(e.target.innerText);
          this.$emit("change",e.target.innerText)
        }
      }
    }
</script>

<style lang="stylus" scoped>
  @import "~css/common.styl"

  .list
    display:flex
    flex-direction:column
    justify-content:center
    width:.4rem
    position:absolute
    top:1.78rem
    bottom:0
    right: 0
    color: $bgColor
    text-align:center

</style>
